<template>
    <el-row class="display" :gutter="20" v-if="countView">
        <!-- 左侧 -->
        <el-col :span="6" sytle="margin-top: 10px ">
            <!-- 左上：热门城市 -->
            <el-card shadow="hover">
                <div class="city">
                    <div>
                        <p style="font-weight: bold;text-align:center;">各省份招生人数排行</p>
                    </div>
                    <el-table :data="tableData" height="250" style="width: 100%; line-height: 10px;">
                        <el-table-column type="index" :index="indexMethod" />
                        <el-table-column prop="province" label="省份" width="70" />
                        <el-table-column prop="plan" label="招生人数" />
                    </el-table>
                </div>
            </el-card>
            <!-- 左下：考生来源饼状图 -->
            <el-card style="margin-top: 10px;height: auto" shadow="hover">
                <div style="height: 250px;width: 100%;" id="studentOrigin"></div>
            </el-card>
        </el-col>
        <!-- 中间：各省招生计划热点图 -->
        <el-col :span="12">
            <el-card style="height: 86vh;" shadow="hover">
                <div style="height: 600px;width:600px" id="enrollInfoMap"></div>
            </el-card>
        </el-col>
        <!-- 右侧 -->
        <el-col :span="6" sytle="margin-top: 10px ">
            <!-- 右上：冷门专业排行柱状图 -->
            <el-card style="height: 310px;" shadow="hover">
                <div style="height: 300px;width: 110%;" id="UnpopularMajor"></div>
            </el-card>
            <!-- 右下：热门专业排行柱状图 -->
            <el-card style="margin-top: 10px; height: auto;" shadow="hover">
                <div style="height: 250px;width: 110%;" id="PopularMajor"></div>
            </el-card>
        </el-col>

    </el-row>
</template>

<script lang="ts">

import { defineComponent, toRefs, reactive, ref, onMounted, onBeforeMount, onBeforeUpdate } from 'vue'
import * as echarts from 'echarts'
import { thisExpression } from '@babel/types'
import { TIMEOUT } from 'dns'
import { method } from 'lodash'
import "echarts/map/js/china.js";
import { selectAllProvince, selectSourceInfo, selectUPMByRanking, selectPMByRanking } from '../../http/api'
import { displayData } from '../../types/display'
import { Vue } from 'vue-demi'

export default defineComponent({


    name: "chart",

    watch: {
        min: () => {

        },
        max: () => {

        }
    },


    setup() {
        var countView: boolean = true
        const data = reactive(new displayData())

        //七大区域
        const sourseData = reactive([])

        //冷门
        const min = reactive([])

        //热门
        const max = reactive([])

        //省份招生表
        const tableData = reactive([]);

        //
        const allProvincData = reactive([{
            name: "南海诸岛",
            value: 0,
            eventTotal: 100,
            specialImportant: 10,
            import: 10,
            compare: 10,
            common: 40,
            specail: 20,
        },
        {
            name: "台湾",
            value: 0,
        },
        {
            name: "香港",
            value: 0,
        },
        {
            name: "澳门",
            value: 0,
        },
        {
            name: "西藏",
            value: 0,
        },])

        // onBeforeUpdate(()=>{})

        // onBeforeMount(() => {
        onBeforeMount(() => {
            const compare = (key) => {
                return (obj1, obj2) => {
                    let value1 = obj1[key]
                    let value2 = obj2[key]
                    if (value1 > value2) {
                        return -1;
                    } else if (value1 < value2) {
                        return 1;
                    } else {
                        return 0
                    }
                }
            }
            countView = false
            selectSourceInfo().then(
                (res) => {

                    res.data.data.forEach(element => {
                        sourseData.push({ value: element.plan, name: element.area })
                    });
                    countView = true
                }
            ).catch(
                (err) => {

                }
            );

            countView = false
            selectUPMByRanking().then(
                (res) => {
                    res.data.data.forEach(element => {
                        min.push({ name: element.majorName, value: element.plan })
                    });
                    countView = true
                    console.log("r");

                }
            ).catch(
                (err) => {

                }
            );

            countView = false
            selectPMByRanking().then(
                (res) => {
                    res.data.data.forEach(element => {
                        max.push({ name: element.majorName, value: element.plan })
                    });
                    countView = true
                    console.log("l");
                
                }
            ).catch(
                (err) => {

                }
            );
            countView = false
            selectAllProvince().then(
                (res) => {
                    var t = res.data.data
                    tableData.push(...t.sort(compare(`plan`)))
                    t.forEach(element => {
                        allProvincData.push({ name: element.province, value: element.plan })
                    })
                    countView = true
                }
            ).catch(
                (err) => {
                }
            )

        }

        )



        const indexMethod = (index) => {
            return ++index;
        }

        //设置setTimeout函数，使dom先进行渲染再执行echarts
        setTimeout(() => {
            getChart()
            getMap()
            getUnpopularChart()
            getPopularChart()
        }, 200);



        // console.log(sourseData);


        const getChart = () => {
            let stuOri = echarts.init(document.getElementById('studentOrigin'))

            const option = {
                tooltip: {//提示框组件
                    trigger: 'item', //item数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用。
                    axisPointer: {
                        // 坐标轴指示器，坐标轴触发有效
                        type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
                    },
                    formatter: '{a} <br/>{b} : {c} <br/>百分比 : {d}%' //{a}（系列名称），{b}（数据项名称），{c}（数值）, {d}（百分比）
                },

                title: {
                    text: "七大区域招生数据",
                    left: "center"
                },
                legend: {
                    top: 'bottom'
                },
                toolbox: {
                    show: false,
                    feature: {
                        mark: { show: true },
                        dataView: { show: true, readOnly: false },
                        restore: { show: true },
                        saveAsImage: { show: true }
                    }
                },
                series: [
                    {
                        name: '七大区域招生数据',
                        type: 'pie',
                        radius: [20, 60],
                        center: ['50%', '42%'],
                        roseType: 'area',
                        itemStyle: {
                            borderRadius: 20
                        },
                        data: sourseData
                    }
                ]
            };
            stuOri.setOption(option)
        }
        // console.log(tableData);

        const getMap = () => {
            const MapOption = {
                title: {
                    text: "各省招生计划",
                    left: "center",
                },
                tooltip: {
                    triggerOn: "mousemove", //mousemove、click
                    padding: 8,
                },
                visualMap: {
                    show: true,
                    type: "continuous",
                    min: 0,
                    max: 400000,
                    left: 0,
                    top: 0,
                    itemGap: 0,
                    showLabel: true,
                    realtime: false,
                    itemWidth: 12,
                    itemHeight: 90,
                    calculable: true,
                },
                geo: {
                    map: "china",
                    scaleLimit: {
                        min: 1,
                    },
                    zoom: 1,
                    roam: true,
                    top: 30,
                    bottom: 10,
                    label: {
                        normal: {
                            show: true,
                            fontSize: "8",
                            color: "rgba(0,0,0)",
                        },
                    },
                    itemStyle: {
                        normal: {
                            borderColor: "rgba(0, 0, 0, 0.2)",
                        },
                        emphasis: {
                            areaColor: "#f2d5ad",
                            shadowOffsetX: 0,
                            shadowOffsetY: 0,
                            borderWidth: 0,
                        },
                    },
                },

                series: [
                    {
                        name: "地区分布",
                        type: "map",
                        roam: true,
                        geoIndex: 0,
                        data: allProvincData,
                    },
                ],
            }
            let EnInfo = echarts.init(document.getElementById('enrollInfoMap'))
            EnInfo.setOption(MapOption)
        }


        const getUnpopularChart = () => {
            const UnpopularOption = {
                title: {
                    text: "冷门专业排行",
                    left: "center"
                },
                tooltip: {
                    trigger: 'item', //坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用
                    axisPointer: {// 坐标轴指示器，坐标轴触发有效
                        type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
                    }
                },
                xAxis: {
                    type: 'category',
                    data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10']
                },
                yAxis: {
                    type: 'value',
                },
                series: [
                    {
                        data: min.sort(function (a, b) { return a.value - b.value; }),
                        type: 'bar',
                        itemStyle: {
                            color: "#1E90FF"
                        },
                        showBackground: true,
                        backgroundStyle: {
                            color: 'rgba(180, 180, 180, 0.2)'
                        }
                    }
                ],

            };
            let Unpopular = echarts.init(document.getElementById('UnpopularMajor'))
            Unpopular.setOption(UnpopularOption)

        }


        const getPopularChart = () => {
            const PopularOption = {
                title: {
                    text: "热门专业排行",
                    left: "center"
                },
                tooltip: {
                    trigger: 'item', //坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用
                    axisPointer: {// 坐标轴指示器，坐标轴触发有效
                        type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
                    }
                },
                xAxis: {
                    type: 'category',
                    data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10']
                },
                yAxis: {
                    type: 'value',
                },
                series: [
                    {
                        data: max.sort(function (a, b) { return b.value - a.value; }),
                        type: 'bar',
                        showBackground: true,
                        backgroundStyle: {
                            color: 'rgba(180, 180, 180, 0.2)'
                        }
                    }
                ],

            };
            let Popular = echarts.init(document.getElementById('PopularMajor'))
            Popular.setOption(PopularOption)

        }


        return {
            tableData,
            indexMethod,
            countView,
        }



    }

}
)


</script>
<style lang="less" scoped>
.display {
    height: 91vh;
    width: 85vw;
    overflow: auto;
}
</style>